<template>
	<view>
		<view class="grid col-4 grid-square flex-sub">
		  <view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
				<image style="left: 0upx;" :src="imgList[index]" mode="aspectFill"></image>
				<view v-if="!readOnly" class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
				  <text class='cuIcon-close'></text>
				</view>			
		  </view>
		  <view v-if="readOnly && imgList.length<1" class="solids">
		    <text class='cuIcon-picfill'>
			</text>
		  </view>
		  <view v-if="!readOnly && imgList.length<num" class="solids" @tap="ChooseImage">
		    <text class='cuIcon-cameraadd'></text>
		  </view>
		</view>
	</view>
</template>

<script>
	import api from '@/utils/api.js';
	import siteApi from '@/utils/siteApi.js';
	export default{
		data(){
			return{
				imgList:[],
			}
		},
		props: {
			num:{
				type:Number,
				default () {
					return 9;
				}
			},
			sImgList: {
				type: Array,
				default () {
					return [];
				}
			},
			readOnly:{
			 type: [Boolean,String],
			 default () {
					return false;
				}
			},
		},
		mounted() {
			this.imgList=this.sImgList;
		},
		watch: {
			
		  sImgList:{
		    handler(newValue, oldValue) {  
		      this.imgList=newValue;
		    },
		    deep:true
		  }
		},
		methods:{
			callBack(){
				this.$emit("change-images",this.imgList);
			},
			ChooseImage(){
			  let _self=this;
			  api.getAuthorize('scope.camera',"你拒绝了授权,无法调用拍照功能",function(){
			    uni.chooseImage({
			      count: 1, //默认9
			      sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			       sourceType: ['album','camera'], 
			      success: (res) => {
			        api.fileUpload(_self.GLOBALVARIABLE.baseURL,res.tempFilePaths[0],function(result){
			          if(result.code==0){
			            let imgurl=result.data;
			            if (_self.imgList.length != 0) {
			              _self.imgList = _self.imgList.concat(imgurl);
			            } else {
			              _self.imgList.push(imgurl);
			            }
						 _self.callBack();
			          }else{
			            uni.showModal({
			              title: '提示',
			              content: result.msg,
			              showCancel:false,
			              success: function(res) {
			              }
			            });
			          } 
			        });
			      }
			    });
			  });
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg(e) {
				uni.showModal({
					title: '提示',
					content: '确定要删除该图片吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1)
						   this.callBack();
						}
					}
				})
			},
		}
	}
</script>

<style>
	page{background:#F5F5F5;}
	.zcForm .cu-form-group{padding-left:0;padding-right:0;}
	.zcForm .cu-form-group .title {min-width: calc(4em + 15px);font-size:28rpx;color:#333333;}
	.zcForm .cu-form-group input{font-size:28rpx;text-align:right;}
	
</style>
